<template>
    <div>
        <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card class="box-card">
    <!-- 搜索添加区域 -->
 
    <el-row :gutter="20">
        <el-col :span="9">
             <el-input placeholder="请输入内容" v-model="keyword" clearable @clear="clearUserkey">
                <el-button slot="append" icon="el-icon-search" @click="search(keyword)" ></el-button>
            </el-input>
        </el-col>
        <el-col :span="4">
            <el-button type="primary" @click="addDialogVisible=true">添加用户</el-button>
        </el-col>

        <!-- 用户列表区域 -->
          <el-table
          
    :data="userlist"
     :row-class-name="tableRowClassName"
     border
 >
 <el-table-column type="index"></el-table-column>
    <el-table-column
      prop="author"
      label="姓名"
      width="200">
    </el-table-column>
    <el-table-column
      prop="title"
      label="名言"
      width="400">
    </el-table-column>

    <el-table-column
      prop="click_count"
      label="使用次数"
      width="100"
      >
    </el-table-column>

     <el-table-column
     label="状态"
      width="200"
      >
      <el-switch
    v-model="value"
     active-color="#13ce66"
  inactive-color="#ff4949">
    </el-switch>
    </el-table-column>

     <el-table-column
      label="操作"
      width="300"
      >
      <!-- 修改按钮 -->

    <el-tooltip class="item" effect="dark" content="修改用户信息" placement="top" :enterable="false">
       <el-button type="primary" icon="el-icon-edit"></el-button>
    </el-tooltip>
   
    <!-- 删除按钮 -->
    <el-tooltip class="item" effect="dark" content="删除用户" placement="top" :enterable="false">
    <el-button type="danger" icon="el-icon-delete"></el-button>
    </el-tooltip>
    <!-- 分配角色按钮 -->
     <el-tooltip class="item" effect="dark" content="分配角色" placement="top" :enterable="false">
    <el-button type="warning" icon="el-icon-setting"></el-button>
    </el-tooltip>
    </el-table-column>
        </el-table>

    </el-row>
<!-- 分页区域 -->
  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="this.pageindex"
      :page-sizes="[12, 2, 5]"
      :page-size="this.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="3">
    </el-pagination>

  <!-- 对话框 添加用户-->
    <el-dialog
    title="添加用户"
    :visible.sync="addDialogVisible"
    width="50%"
    @close="addDialogClosed"
    >
    <!-- 内容主体区域 -->

    <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px">
      <el-form-item label="用户名" prop="username">
          <el-input v-model="addForm.username"></el-input>
      </el-form-item>

       <el-form-item label="名言" prop="say">
          <el-input v-model="addForm.say"></el-input>
      </el-form-item>

       <el-form-item label="使用次数" prop="usecount">
          <el-input v-model="addForm.usecount"></el-input>
      </el-form-item>

    </el-form>

    <!-- 底部按钮区域 -->
    <span slot="footer" class="dialog-footer">
      <el-button @click="addDialogVisible = false">取 消</el-button>
      <el-button type="primary"  @click="addUser">确 定</el-button>
    </span>
    </el-dialog>

 
</el-card>
    </div>

</template>

<script>
import qs from 'qs';
export default {
    data(){
        return{
          // 当前页数
            pageindex:2,
            // 页面最大条数
            pagesize:12,
            userlist:[],
            value:true,
            keyword:'',
            result:[],
            // 控制添加用户对话框的显示与隐藏
            addDialogVisible:false,
            // 添加用户的表单数据
            addForm:{
              username:'',
              say:'',
              usecount:'',
            },
            // 添加表单的验证规则对象
            addFormRules:{
              username:[
                {required:true,message:'请输入用户名',trigger:'blur'},
                {min:3,max:10,message:'用户长度在3-10个字符',trigger:'blur'}
              ],
              say:[
                 {required:true,message:'请输入名言',trigger:'blur'},
                {min:5,max:50,message:'名言长度在5-50个字符',trigger:'blur'}
              ],
              usecount:[
                  {required:true,message:'请输入使用次数',trigger:'blur'},
                {min:1,max:10,message:'使用次数长度在1-10个字符',trigger:'blur'}
              ]
            }
        }
    },
    created(){
        this.getUserList();
    },
    methods:{
         tableRowClassName({row, rowIndex}) {
        if (rowIndex === 2) {
          return 'warning-row';
        } else if (rowIndex === 4) {
          return 'success-row';
        }
        return '';
      },
        getUserList(){
            this.$ajax({
                method:'get',
                url:'/news/newslist',
                params:{
                    pageindex:this.pageindex,
                    pagesize:this.pagesize,
                }
            }).then(response => {
                console.log(response);
                var data = response.data;
                if(data.Status == 0){
                    this.userlist = data.Data;
                    console.log(this.userlist);
                }else{
                    this.$message.error('服务器获取用户列表失败!');
                }
            })
        },
        // 监听pagesize
        handleSizeChange(newSize){
          console.log(newSize);
          this.pagesize = newSize;
          this.getUserList();
        },
        // 监听页码值改变的事件
        handleCurrentChange(newPage){
          this.pageindex = newPage;
          this.getUserList();
        },
        search(keyword){
            for(var i=0;i<this.userlist.length;i++){
              if(this.userlist[i].author.toLowerCase().indexOf(keyword.toLowerCase()) > -1){
                   this.result.push(this.userlist[i]);
              }
            }
            this.userlist = this.result;
        },
        clearUserkey(){
            this.getUserList();
            this.result=[];
            this.keyword='';
        },
        addDialogClosed(){
            this.$refs.addFormRef.resetFields();
        },
        addUser(){
          this.$refs.addFormRef.validate(async valid =>{
            console.log(valid);
            this.addDialogVisible = false;
            this.$message.error('添加用户失败');
            if(!valid){
              return;
            }else{
            //  this.$ajax({
            //    method:'post',
            //    url:'/news/newslist',
            //    data:qs.stringify({
            //          author:this.addForm.username,
            //          title:this.addForm.say,
            //          click_count:this.addForm.usecount
                      
            //    })
            //  }).then(response =>{
            //    var key = new Date().getSeconds() + 0.1;
            //    this.userlist.unshift({id:key,author:this.addForm.username,title:this.addForm.say,click_count:this.addForm.usecount});
            //  })
             }
          })
        }
    }
}
</script>

<style lang="less">
    .el-table .warning-row {
    background: oldlace;
  }
    .has-gutter{
        text-align: center;
    }
  .el-table .success-row {
    background: #f0f9eb;
  }
</style>